<template>
  <div class="user-management-page">
    <!-- 导航栏 -->
    <van-nav-bar
      title="参与情况管理"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      class="nav-bar"
    />

    <!-- 全选框 -->
    <div class="select-all">
      <van-checkbox v-model="selectAll" @change="toggleSelectAll">
        全选
      </van-checkbox>
    </div>

    <!-- 用户列表展示 -->
    <div class="user-list">
      <div
        v-for="user in userList"
        :key="user.userId"
        class="user-item"
        :class="{ selected: selectedUsers.includes(user.userId) }"
        @click="toggleSelect(user.userId)"
      >
        <div class="user-avatar">
          <img :src="user.pic || defaultAvatar" alt="用户头像" />
        </div>
        <p class="user-info">
          <span class="user-name">{{ user.userName }}</span>
          <span class="event-name">参与{{ user.eventName }}</span>
        </p>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div v-if="selectedUsers.length > 0" class="action-buttons">
      <van-button type="info" @click="submitParticipation">正常参与</van-button>
      <van-button type="danger" @click="submitUnParticipation">未参与</van-button>
    </div>
  </div>
</template>

<script>
import { Button, Checkbox } from "vant";
import organizerApi from "@/api/organizerProfile.js";

export default {
  components: {
    "van-button": Button,
    "van-checkbox": Checkbox,
  },
  data() {
    return {
      eventId: "",
      userList: [],
      selectedUsers: [], // 存储选中的用户 ID
      selectAll: false, // 用于控制全选框的状态
      defaultAvatar: require('@/assets/default.jpeg') // 默认头像
    };
  },
  mounted() {
    this.eventId = this.$route.query.id;
    this.fetchUserList();
  },
  methods: {
    submitParticipation() {
      const participationList = this.selectedUsers.map((userId) => {
        const user = this.userList.find((u) => u.userId === userId);
        return {
          userId: user.userId,
          eventId: this.eventId,
          hours: user.hours || 0,
        };
      });

      organizerApi
        .addParticipation(participationList)
        .then(() => {
          this.$toast.success("正常参与已提交");
          this.selectedUsers = [];
          this.fetchUserList(); // 重新加载列表
        })
        .catch((error) => {
          console.error("提交失败:", error);
          this.$toast.fail("提交失败，请稍后重试");
        });
    },
    submitUnParticipation() {
      const participationList = this.selectedUsers.map((userId) => {
        const user = this.userList.find((u) => u.userId === userId);
        return {
          userId: user.userId,
          eventId: this.eventId,
          hours: user.hours || 0,
        };
      });

      organizerApi
        .addUnParticipation(participationList)
        .then(() => {
          this.$toast.success("未参与已提交");
          this.selectedUsers = [];
          this.fetchUserList(); // 重新加载列表
        })
        .catch((error) => {
          console.error("提交失败:", error);
          this.$toast.fail("提交失败，请稍后重试");
        });
    },
    goBack() {
      this.$router.go(-1); // 返回上一个页面
    },
    fetchUserList() {
      // 从后端获取用户报名数据
      organizerApi
        .getUsersWithIncompleteParticipation(this.eventId)
        .then((res) => {
          console.log(res);
          this.userList = res;
        })
        .catch((error) => {
          console.error("获取用户列表失败", error);
        });
    },
    toggleSelect(userId) {
      if (this.selectedUsers.includes(userId)) {
        this.selectedUsers = this.selectedUsers.filter((id) => id !== userId);
      } else {
        this.selectedUsers.push(userId);
      }
      this.updateSelectAllStatus(); // 每次点击后更新全选框的状态
    },
    toggleSelectAll() {
      if (this.selectAll) {
        this.selectedUsers = this.userList.map((user) => user.userId); // 全选使用 userId
      } else {
        this.selectedUsers = []; // 取消全选
      }
    },
    updateSelectAllStatus() {
      this.selectAll = this.userList.length === this.selectedUsers.length; // 更新全选框状态
    },
  },
};
</script>

<style scoped>
.van-nav-bar ::v-deep .van-nav-bar__text,
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white !important;
}

.van-nav-bar ::v-deep .van-nav-bar__arrow{
  color: white !important;
}
.user-management-page {
  font-family: Arial, sans-serif;
  height: 100vh;
  overflow-y: auto;

}

.van-nav-bar {
  background-color: #007aff; /* 蓝色背景 */
  height: 7vh;
  line-height: 7vh;
}

/* 全选框样式 */
.select-all {
  padding: 1.5vh;
  background-color: #f7f7f7;
  border-bottom: 0.2vh solid #ccc;
}

/* 用户列表样式 */
.user-list {
  padding: 1.5vh;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 2vh;
  margin-bottom: 1.5vh; /* 增加底部间距 */
  background: #f7f7f7;
  border-radius: 0.5vh;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.user-item.selected {
  background: #d3f9d8;
  border: 0.2vh solid #52c41a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 选中时增强阴影 */
}

.user-avatar img {
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  margin-right: 2vh;
}

.user-info {
  font-size: 2vh;
  color: #333;
}

.user-name {
  font-weight: bold;
}

.event-name {
  font-size: 1.8vh;
  color: #666;
}

/* 底部按钮样式 */
.action-buttons {
  position: fixed;
  bottom: 3vh;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.van-button {
  width: 40%;
  border-radius: 10px; /* 设置圆角 */
  padding: 1vh 0; /* 设置上下内边距，保证按钮内容居中 */
  font-size: 1.8vh; /* 设置字体大小 */
  transition: all 0.3s ease; /* 平滑过渡 */
}


</style>
